@import url('https://fonts.googleapis.com/css?family=Lobster&subset=latin-ext');
@import url('https://use.fontawesome.com/releases/v5.6.3/css/all.css');
@import url('https://fonts.googleapis.com/css?family=Staatliches&subset=latin-ext');
:root {
 --websiteborder:rgba(255,255,255,0.3);
--websitebordersize:1px;
}



body{
background:#000;
	color:#fff;
}



.table td, .table th {

    padding: .75rem;
    vertical-align: top;
    border-top: 1px dashed var( --websiteborder);

}



#content{padding:0;}

.content img{
	max-width:100%;
	margin:5px;
	height:auto
}


/** logo & navbar **/

.logo{ max-height:120px;margin:20px 0;}

.navbar{
border-top:dashed var(--websitebordersize)  var(--websiteborder);border-bottom:dashed var(--websitebordersize) var(--websiteborder);padding:0 0;}



.navi-box{
  display: flex;
	list-style-type:none;
	margin:0;
	padding:0;
	text-align:center;
	width:100%;
}

.navi-box li{
border:dashed var(--websitebordersize) var(--websiteborder);
	border-top:0;
	border-bottom:0;padding:10px 5px;
	transition:all 0.4s linear;
flex: 1
	
}

.navi-box li a{
color:#E51F1E;;
font-size:1.3rem;
    font-family: 'Staatliches', cursive;
transition:all 0.4s linear
}


.navi-box li:hover {
background:#E51F1E;
}
.navi-box li:hover a{
color:#fff;
	
}

.navi-box li:hover a:hover{
color:#fff;text-decoration:none;
	
}


/*** carousel **/

.carousel-item{text-shadow:4px 4px 10px #000;height:500px;background:#999;background-size:cover !important;background-position:bottom center !important;}


.carousel-item h2{
font-family: 'Lobster', cursive;

	color:#E51F1E;

	font-size:3.6rem;
}


.carousel-item h3{
    font-family: 'Staatliches', cursive;

}
/*box3*/


.box {
display:flex;	
height:200px;
justify-content: center;
align-items: center;
align-content: center;
font-family: 'Lobster', cursive;
transition:all 1s ease;
}

.box:hover{
background:#E51F1E;
color:#fff;
}

.box img{
transition:all 1s ease;}

.box:hover img{
transform:rotate(-30deg)
}

.box1{
border:dashed var(--websitebordersize) var(--websiteborder); border-right:0;

}
.box2{
border:dashed var(--websitebordersize) var(--websiteborder);

}
.box3{
border:dashed var(--websitebordersize) var(--websiteborder) ;border-left:0;

}



/** content box **/


.content-box{
	display:flex;
	flex-wrap:wrap;
	flex-direction:row;
	border:dashed var(--websitebordersize) var(--websiteborder);
	border-top:0;
	min-height:300px;
justify-align:center;
	align-items:center;
	overflow:hidden;

}

 h1{
font-family: 'Lobster', cursive;
	color:#E51F1E;

}

 h2{
font-family: 'Lobster', cursive;
		color:#E51F1E;


}

h3{
font-family: 'Lobster', cursive;
		color:#E51F1E;

}

 h4{
font-family: 'Lobster', cursive;
		color:#E51F1E;

}


 h5{
font-family: 'Lobster', cursive;
		color:#E51F1E;

}


 h6{
font-family: 'Lobster', cursive;
		color:#E51F1E;

}


.content-box .content{
width:50%;
	padding:10px;
}

.chalkfood{
display:flex;
flex-wrap:wrap;
	align-items:center;
  align-content: space-around;
width:50%;
}

.chalkfood img{
	display:block;

width:33%;
}



/*content page */

.contentpage-box{;
		min-height:400px;
	border:dashed var(--websitebordersize) var(--websiteborder);
	padding-top:2rem;
	padding-bottom:2rem;
}


.contentpage-box h1{

font-family: 'Lobster', cursive;

}

.contentpage-box h2{

font-family: 'Lobster', cursive;

}

.contentpage-box h3{

font-family: 'Lobster', cursive;

}

.contentpage-box h4{

font-family: 'Lobster', cursive;


}

.contentpage-box h5{

font-family: 'Lobster', cursive;

}

.contentpage-box h6{

font-family: 'Lobster', cursive;

}


#title{

background:#E51F1E;
	color:#fff;
	font-family: 'Lobster', cursive;
}


/** footer&subfotter **/

footer{
	border:dashed var(--websitebordersize) var(--websiteborder);border-top:0;border-bottom:0;

}



footer h1{
font-family: 'Lobster', cursive;
	color:#E51F1E;

}

footer h2{
font-family: 'Lobster', cursive;
		color:#E51F1E;


}

footer h3{
font-family: 'Lobster', cursive;
		color:#E51F1E;

}

footer h4{
font-family: 'Lobster', cursive;
		color:#E51F1E;

}


footer h5{
font-family: 'Lobster', cursive;
		color:#E51F1E;

}


.content-box h6{
font-family: 'Lobster', cursive;
		color:#E51F1E;

}



.subfooter {
text-align:center;
font-size:13px;
padding:10px;
color:#fff;
background:#E51F1E;
}

.subfooter a{
color:#fff;}





/**media Queries **/


@media (max-width:800px){
	
	/** navbar carosuel*/
	
	.navbar{
	margin:0 10px;
		border-bottom:0;
	}
	
	.carousel-item{
	min-height:300px;
		height:auto;
	}

	.box{
	display:flex;
	flex-direction:column;
	text-align:center;margin:10px 0;
	border:dashed var(--websitebordersize) var(--websiteborder) 
	}
	

	
	
	.content-box{
	display:flex;
	flex-wrap:wrap;
		flex-direction:column;
		padding:10px;
		border:0;
	}
	
	.chalkfood{
		
margin:10px 0;
	width:100%;
		justify-content: space-around;
  align-items: center;
  align-content: space-around;
	}
	
	.chalkfood img{
	width:20%;
	}
	
	.content-box .content{
	width:100%;
	}

	
	footer{	border:dashed var(--websitebordersize) var(--websiteborder);
		margin: 0 15px;
}
	

	.row{
	padding:10px;}
	
	

.navi-box{
  display: flex;
	list-style-type:none;
	margin:0;
	padding:0;
	text-align:center;
		flex-direction:column;
	width:100%;
margin: 0 15px;
	}

.navi-box li{
border:dashed var(--websitebordersize) var(--websiteborder);
border-top:0;
padding:10px 5px;
	transition:all 0.4s linear;
flex: 1
	
}

	

	
	.responsive-menu{
	border:dashed var(--websitebordersize) var(--websiteborder);
padding:10px;
		text-align:center;
		background:transparent;
		width:100%;
	box-sizing:border-box;
		color:#fff;
margin: 0 30px;
		
	}
	
	#title{
	margin: 0 15px;
	}
	
	
	.navbar{
	border:0;

	}

	

	
	
}